<template>
  <div class="list_box">
    <div class="left_menu" :class="{ is_show: store.list_is_active }">
      <div
        class="menu_box"
        v-for="item in menu"
        :key="item.index"
        :class="{ menu_select: menu_select === item.index }"
        @click="menu_click(item.index)"
      >
        <span class="iconfont" :class="item.icon"></span>
        <div class="right">{{ item.title }}</div>
      </div>
    </div>
    <div class="right_view">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import { useIndexStore } from "@/store/model/index";
import { useRouter } from "vue-router";

const store = useIndexStore();
const router = useRouter();

const menu = ref([]);
const menu_select = ref("1");

onBeforeMount(() => {
  menu.value = store.config.menu;
  menu_select_change()
})

const menu_click = (index) => {
  if(index === menu_select.value){
    return
  }
  menu_select.value = index;
  menu_select_change()
};
const menu_select_change = () => {
  menu.value.forEach((item) => {
    if (item.index === menu_select.value) {
      router.push({ path:item.path });
    }
  });
};

</script>

<style lang="less" scoped>
.list_box {
  width: 100%;
  height: 100%;
  display: flex;
  --menu-width: 180px;
  .left_menu {
    width: var(--menu-width);
    height: 100%;
    box-sizing: border-box;
    border-right: var(--split-line);
    background-color: var(--menu-bg);
    transform: translateX(0);
    z-index: 1;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    flex-shrink: 0;
    .menu_box {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      color: var(--menu-color);
      box-sizing: border-box;
      border-bottom: var(--split-line);
      &:hover {
        background-color: var(--menu-box-hover-color);
        cursor: pointer;
      }

      .iconfont {
        font-size: 24px;
        margin-left: 20px;
      }
      .right {
        margin: auto;
      }
    }
    .menu_select {
      background-color: var(--menu-box-active-bg) !important;
      color: var(--menu-box-active-color);
    }
  }
  .is_show {
    width: 0;
    border-right: none;
    transform: translateX(calc(var(--menu-width) * -1));
  }

  .right_view {
    height: 100%;
    flex-grow: 1;
  }
}
</style>
